let arr = JSON.parse(localStorage.getItem('orderClear_data'))
let dangqianye = 1
let maxPage
let searchArr = []
let startState = '未清关'

// 函数调用
search()



// 4-1筛选搜索功能，——搜索按钮
$(".search_btn").click(function () {
  search()
})
// 搜索函数
function search() {
  // console.log('搜索功能');
  let order_num = $('#order_num').val()
  let user = $('#user').val()
  let tel_num = $('#tel_num').val()
  let start_time = $('#start_time').val()
  let end_time = $('#end_time').val()
  console.log(order_num, user, tel_num, start_time, end_time);
  searchArr = [...arr] //将arr中的每一项放进新数组里面[]
  // 默认未清单状态
  for (let i = 0; i < searchArr.length; i++) {
    if (searchArr[i].clean_state != startState) {
      searchArr.splice(i, 1)
      i--
    }
  }
  console.log(searchArr);
  // 当订单编号不为空时
  if (order_num != '') {
    for (let i = 0; i < searchArr.length; i++) {
      if (searchArr[i].orderNum != order_num) {
        searchArr.splice(i, 1)
        i--
      }
    }
  }
  // 当用户名不为空时
  if (user != '') {
    for (let i = 0; i < searchArr.length; i++) {
      if (searchArr[i].userName != user) {
        searchArr.splice(i, 1)
        i--
      }
    }
  }
  // 当联系电话不为空时
  if (tel_num != '') {
    for (let i = 0; i < searchArr.length; i++) {
      if (searchArr[i].tel != tel_num) {
        searchArr.splice(i, 1)
        i--
      }
    }
  }
  // 当开始时间不为空时
  if (start_time != '') {
    let start_time1 = new Date(start_time) //输入框输入的时间
    for (let i = 0; i < searchArr.length; i++) {
      let oDate2 = new Date(searchArr[i].time); //数组中的时间
      if (start_time1.getTime() > oDate2.getTime()) {
        searchArr.splice(i, 1)
        i--
      }
    }
  }
  // 当结束时间不为空时
  if (end_time != '') {
    let end_time1 = new Date(end_time) //输入框输入的时间
    for (let i = 0; i < searchArr.length; i++) {
      let oDate2 = new Date(searchArr[i].time); //数组中的时间
      if (end_time1.getTime() < oDate2.getTime()) {
        searchArr.splice(i, 1)
        i--
      }
    }
  }
  // console.log(searchArr);
  showPage(searchArr)
  showData(searchArr, 1)
}
// 重置按钮函数——清空输入框内容，在调用搜索函数
$(".reset_btn").click(function () {
  console.log('重置');
  $('#order_num').val('')
  $('#user').val('')
  $('#tel_num').val('')
  $('#start_time').val('')
  $('#end_time').val('')
  $('.order').eq(0).addClass('activeAll').siblings().removeClass('activeAll')
  startState = '未清关'
  search()
})
// 4-2筛选搜索功能，——tab栏切换
// tab栏事件委派
$(".nav").eq(0).on('click', '.order', function () {
  // console.log($(this));
  $(this).addClass('activeAll').siblings().removeClass('activeAll')
  startState = $(this).text()
  search()
})



// 1-1将内容渲染到页面上
function showTable(data) {
  $("#myTbody").html('')
  $("#myTable").removeClass('myTable')
  setTimeout(() => {
    $("#myTable").addClass('myTable')
    for (let i = 0; i < data.length; i++) {
      $("#myTbody").append(`
    <tr class="row_1">
          <td colspan="9">
            <div class="T_row_1">
              <div class="T_left">
                <div>订单号： ${data[i].orderNum}</div>
                <div class="method">${data[i].payMethod}</div>
              </div>
              <div class="T_right">查看详情</div>
            </div>
  
          </td>
        </tr>
        <tr class="row_2">
          <td class="productText">
            <img src="${data[i].imgUrl}" alt="">
            <span>${data[i].goodsTitle}</span>
            <span>${data[i].size}</span>
          </td>
          <td class="money_num">
            <div>${data[i].price}</div>
            <div>${data[i].count}</div>
          </td>
          <td class="information">
            <div>用户名： ${data[i].userName}</div>
            <div>收件人： ${data[i].addressee}</div>
            <div>${data[i].tel}</div>
          </td>
          <td>${data[i].time}</td>
          <td>${data[i].state}</td>
          <td>${data[i].clean_state}</td>
          <td>${data[i].type}</td>
          <td> </td>
          <td>${data[i].payMoney}</td>
        </tr>
    `)
    }
  }, 0)
}
// 1-2 数据渲染，5条一页数据,给当前页加上active类名
function showData(data, pageNum) {
  let start = (pageNum - 1) * 5
  dangqianyeData = data.slice(start, start + 5)
  showTable(dangqianyeData)
  $(".page").eq(pageNum - 1).addClass("active").siblings().removeClass("active")
  dangqianye = pageNum
}
// 1-3渲染页码，为每一页加上page类名
function showPage(data) {
  $(".myPage").html('')
  maxPage = Math.ceil(data.length / 5)
  if (dangqianye > maxPage) {
    dangqianye = maxPage
  }
  for (let i = 1; i <= maxPage; i++) {
    $(".myPage").append(`<div class="page">${i}</div>`)
  }
}
// 1-4 page的事件委派
$(".myPage").on('click', '.page', function () {
  showData(arr, parseInt($(this).text()))
})
// 2.点击上一页函数，增加active类名
$(".pre").click(function () {
  console.log('上一页');
  if (dangqianye > 1) {
    let shangyiye = dangqianye - 1
    showData(arr, shangyiye)
  }
})
// 3.下一页函数
$(".next").click(function () {
  console.log('下一页');
  if (dangqianye < maxPage) {
    let xiayiye = dangqianye + 1
    showData(arr, xiayiye)
  }
})